<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>访问授权</title>
		
		<script src="js/vue.js"></script>
		<link rel="stylesheet" href="js/element-ui/lib/theme-chalk/index.css">
		<script src="js/element-ui/lib/index.js"></script>
		<script src="js/axios.js"></script>
		
		<link rel="stylesheet" href="css/common.css">
		<style>
			.auth-container{
				position: absolute;
				top: 0px;
				left: 0px;
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.auth-container>div{
				width: 300px;
				box-shadow: 2px 2px #e8eaec;
				min-height: 100px;
				box-sizing: border-box;
				padding:40px;
				background-color: #FFFFFF;

				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="header-panel" v-loading.fullscreen.lock="loading" v-cloak>
				<div></div>
				<div><h2>数据库结构对比</h2></div>
				<div></div>
			</div>
			<div class="auth-container">
				<div>
					<div>
						<el-input
							style="width: 100%;"
							placeholder="请输入访问授权码"
							v-model="authCode"
							clearable>
						</el-input>
					</div>
					<div style="margin-top: 20px">
						<el-button type="success" size="medium" @click="clickAuth()">授权</el-button>
					</div>
					<div style="margin-top: 10px">
						<el-popover
								placement="bottom"
								title="提示"
								width="200"
								trigger="click"
								content="授权码在应用启动的命令行日志里面有打印出来">
							<el-button slot="reference" type="text">忘记授权码？</el-button>
						</el-popover>
					</div>
				</div>
			</div>
			<iframe src="component/footer.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()"></iframe>
		</div>
		<script src="js/utils.js"></script>
		<script>
			let that = new Vue({
				el: '#app',
				data: function () {
					return {
						loading: false,
						authCode:"",
					}
				},
				methods: {
					clickAuth(){
						if (this.authCode) {
							this.auth(this.authCode);
						} else {
							this.$message({type: 'error', message: "请输入授权码"});
						}
					},
					auth(authCode){
						let param = {
							authCode : authCode
						}
						this.loading = true;
						axios.post(`${baseUrl}/api/auth`, param).then(response => {
							this.loading = false;
							if (response.data.code == 200) {
								// 登录成功后将授权码存到浏览器里并且跳转
								localStorage.setItem("authCode", authCode);
								location.href = `index.html`;
							} else {
								this.$message({type: 'error', message: response.data.msg});
							}
						})
						.catch(error => {
							console.log(error);
							this.$message({type: 'error', message: '请求失败'});
						})
					},
				},
				mounted() {
					let authCode = getUrlParam("authCode");
					if (authCode) {
						this.auth(authCode);
					}
				}
			})
		</script>
	</body>
</html>
